<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
        <link rel="preload" href="/node_modules/@perspective-dev/server/dist/wasm/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="preload" href="/node_modules/@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/viewer/dist/css/pro-dark.css" />
        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/workspace/dist/css/pro-dark.css" />
        <style>
            perspective-workspace {
                left: 0;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
            }

            perspective-viewer {
                --d3fc-positive--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
                --d3fc-negative--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
                --d3fc-full--gradient: linear-gradient(#94d0ff, #8795e8, #966bff, #ad8cff, #c774e8, #c774a9, #ff6ad5, #ff6a8b, #ff8b8b, #ffa58b, #ffde8b, #cdde8b, #8bde8b, #20de8b) !important;
            }
        </style>
    </head>
    <body>
        <perspective-workspace id="workspace">
            <perspective-viewer table="movies"></perspective-viewer>
        </perspective-workspace>
        <script type="module">
            import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
            import "/node_modules/@perspective-dev/workspace/dist/cdn/perspective-workspace.js";
            import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
            import "/node_modules/@perspective-dev/viewer-d3fc/dist/cdn/perspective-viewer-d3fc.js";

            import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";

            const SCHEMA = {
                Title: "string",
                "US Gross": "float",
                "Worldwide Gross": "float",
                "US DVD Sales": "float",
                "Production Budget": "float",
                "Release Date": "date",
                "MPAA Rating": "string",
                "Running Time min": "integer",
                Distributor: "string",
                Source: "string",
                "Major Genre": "string",
                "Creative Type": "string",
                Director: "string",
                "Rotten Tomatoes Rating": "integer",
                "IMDB Rating": "float",
                "IMDB Votes": "integer",
            };

            const MOVIES_URL = "https://vega.github.io/editor/data/movies.json";

            const datasource = async () => {
                const request = fetch(MOVIES_URL);
                const worker = await perspective.worker();
                const response = await request;
                const json = await response.json();
                for (const row of json) {
                    row["Release Date"] = row["Release Date"] ? new Date(row["Release Date"]) || null : null;
                }
                const table = await worker.table(SCHEMA);
                table.update(json);
                return table;
            };

            let req = await fetch("layout.json");
            let layout = await req.json();

            window.workspace.tables.set("movies", datasource());
            window.workspace.restore(layout);
        </script>
    </body>
</html>
